<template>
    <div>
      <nav class="navTitle">
        德胜棋牌房卡系统
      </nav>
      <div class="loginPhoto">
        <img src="../assets/img/login.png" alt="">
      </div>
      <div class="loginContent">
        <ul>
          <li>
            <input data-vv-as="账号"
                   v-model="admin"
                   type="text"
                   placeholder="请输入账号"
                   class="admin"
                   name="admin"
                   v-validate="'required'"
            >
            <div class="errorTips">
              <span v-show="errors.has('admin')">
                {{ errors.first('admin') }}
              </span>
            </div>
          </li>
          <li>
            <input data-vv-as="密码"
                   v-model="passWord"
                   type="password"
                   placeholder="请输入密码"
                   name='passWord'
                   class="passWord"
                   v-validate="'required|alpha_dash'"
            >
            <div class="errorTips">
              <span v-show="errors.has('passWord')">{{ errors.first('passWord') }}</span>
            </div>
          </li>
        </ul>
        <div class="loginBtn">
          <button @click="login">登录</button>
        </div>
        <div class="forgetWord">
          <router-link to="/forWord">忘记密码</router-link>
        </div>
      </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
      name: 'login',
      data () {
        return {
          admin: '',
          passWord: ''
        }
      },
      methods: {
        login () {
          this.$validator.validateAll({
            admin: this.admin,
            passWord: this.passWord
          }).then((result) => {
            if (result) {
              axios.post(this.Url + '/exclude/account/sign-in', {
                account: this.admin,
                password: this.passWord
              }).then((response) => {
                let data = response.data
                if (data.status === 0) {
                  let info = JSON.stringify(data.data)
                  localStorage.setItem('userInfo', info)
                  this.$router.push({name: 'leader'})
                } else {
                  this.$message({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                  })
                }
              })
            }
          })
        }
      }
    }
</script>
<style lang="less" scoped>
  .loginPhoto{
    text-align: center;
    padding-top: 1rem;
    img{
      width:3.54rem;
      height: 3.54rem;
    }

  }
  .loginContent{
    margin:0 auto;
    margin-top: 1.43rem;
    width:5.3rem;
    font-size: 0.4rem !important;

    li{
      padding-bottom:0.3rem;
    }
    input{
      padding-left:0.1rem;
      border:none;
      background-color: #FFFFFF;
      box-shadow: inset 0 0px 0.03rem 0.03rem #E8E8E8;
      outline: none;
    }
    input:-ms-input-placeholder{text-align: center;}
    input::-webkit-input-placeholder{text-align: center;}
    input::-moz-placeholder { text-align: center; }
    .admin,.passWord{
      border: 0.02px solid #E8E8E8;
      border-radius: 0.3rem;
      width:5.28rem;
      height:0.9rem;
      text-align: center;
    }
    .loginBtn{
      padding-top: 0.2rem;
      button{
        width:5.28rem;
        height:0.9rem;
        color: #fff;
        -webkit-border-radius: 0.3rem;
        -moz-border-radius:0.3rem;
        border-radius: 0.3rem;
        outline: none;
        border:none;
        background-color: #00AEED;
      }
    }
    .forgetWord{
      line-height: 1rem;
      text-align: center;

      a{
        display: inline;
        color: #00AEED;
        padding-bottom:0.05rem;
        border-bottom: 0.02rem solid #00AEED;
      }
    }
  }
  .errorTips{
    text-align: center;
    color: #ff4c39;
    font-size:0.32rem;
  }

</style>
